<div id="imageDirList" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml" style=" height:100%;margin: 0px;padding: 0px;">
    <div  id="bodyFrame" class="panel panel-default"  style="margin: 0px;" >
        <div id="topBody" class="panel-heading" style="margin: 0px;padding: 5px;" >
            <div style="float: left;">
                <ol class="breadcrumb" style="margin: 0px;">
                    <li v-for="(item,index) in dirLayers"><button class="btn btn-link" v-on:click="dirLayerSel(item.id,index)" style="padding: 0px">{{item.name}}</button></li>
                </ol>
            </div>
            <div style="float: right;">
                <button   class="btn btn-primary" type="button" data-toggle="modal" data-target="#addDirModal">
                    <span class="glyphicon glyphicon-plus"></span> 添加一个文件夹
                </button>
                <button  class="btn btn-primary" type="button" data-toggle="modal" data-target="#addImgModal">
                    <span class="glyphicon glyphicon-plus"></span> 添加一个图片
                </button>
                <button  :class="isSel ? 'btn btn-primary ' : 'btn btn-primary disabled'" type="button" v-on:click="deleteSel()" >
                    删除
                </button>
            </div>
            <br/><br/>
        </div>
        <div id="centerBody" class="panel-body">
            <!--图片路径列表-->
            <template v-for="(item,index) in items" style="list-style-type:none">
                <div class="panel col-sm-1 column imgItem" >
                    <div class="panel-body  " style="padding: 0px; margin: 0px;" >
                        <div v-if="item.type == 'img'">
                            <img :src="loadImgUrl+item.id" class="img-thumbnail dirImg"  tabindex="0"  v-on:focus="dirSel(item)"  v-on:blur="dirBlur(item)" />
                        </div>
                        <div v-if="item.type == 'dir'">
                            <img src="/img/fileIcon.jpg" class="img-thumbnail dirImg"  tabindex="0" @dblclick="dblClickDir(item.id,index)" v-on:focus="dirSel(item)" v-on:blur="dirBlur(item)" />
                        </div>
                    </div>
                    <div class="panel-footer" style="padding: 0px; margin: 0px;">
                        <span>{{item.name.length > 10 ? item.name.substring(0,10)+'...' : item.name}}</span>
                    </div>
                </div>
                <template v-if="(index + 1) % 12 == 0">
                    <div style="color: white"  align="center">-我是分隔符-</div>
                </template>
            </template>
        </div>
        <div id="bottomBody" class="panel-footer">
            <!--底部-->
        </div>
    </div>

    <!-- 加文件夹的（Modal） -->
    <div class="modal fade" id="addDirModal" tabindex="-1" role="dialog" aria-labelledby="dirModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="dirModalLabel">
                        增加一个文件夹
                    </h4>
                </div>
                <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="mkDirName" class="col-lg-2 control-label">文件夹名称：</label>
                                <div class="col-lg-10">
                                    <input class="form-control" id="mkDirName"  type="text" v-model="mkDir.name">
                                </div>
                            </div>
                            <div class="form-group">
                                <label  for="mkDirPName" class="col-lg-2 control-label">
                                   		父文件夹路径
                                </label>
                                <div class="col-lg-10">
                                    <input class="form-control" id="mkDirPName" type="text" v-model="nowDirItem.name"  disabled>
                                </div>
                            </div>
                        </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" v-on:click="addDir">
                        确认增加
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    
    
    <!-- 加图片的（Modal） -->
    <div class="modal fade" id="addImgModal" tabindex="-1" role="dialog" aria-labelledby="imgModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="imgModalLabel">
                       	增加一个图片
                    </h4>
                </div>
                <div class="modal-body">
                    <!--图片表单部分--> 
                        <form class="form-horizontal" role="form" name="submitForm"  ref="submitForm"  >
                            <div class="form-group"  >
                                <label for="imgFile" class="col-sm-2 control-label">选择图片：</label>
                                <div class="col-sm-10">
                                    <input type="file" name="file"  class="form-control" id="imgFile" ref="fileSel" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="imgDirName" class="col-sm-2 control-label">文件夹</label>
                                <div class="col-sm-10">
                                	<input v-model="nowDirItem.id" type="hidden" name="imageDirId" class="form-control"   />
                                    <input v-model="nowDirItem.name" type="text" name="dirName" class="form-control" id="imgDirName" disabled="disabled"/>
                                </div>
                            </div> 
                        </form>
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" v-on:click="addImg"> 提交保存 </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    
      
</div>


<script type="text/javascript">
    //采用vue
    var imageDirList=new Vue({
        el: '#imageDirList',
        data: {
            loadImgUrl: Vue.prototype.getUrl('/config/img/loadImg/small/'),
            loadDirs : Vue.prototype.getUrl('/config/img/getImageDirs/'),
            saveDir :  Vue.prototype.getUrl('/config/img/saveDir'), //保存文件夹
            saveImage : Vue.prototype.getUrl('/config/img/saveAndUpload'), //保存图片url
            deleteImg : Vue.prototype.getUrl('/config/img/delete/'), //删除图片url
             deleteDir : Vue.prototype.getUrl('/config/img/deleteDir/'), //删除文件夹url
            items : [
                    ],
            dirLayers:[{type:'dir',name:'根目录',id:'1'}], //存放路径层上的文件夹对象
            nowDirItem:{type:'dir',name:'根目录',id:'1'},
            //增加文件夹
            mkDir :{
                id:null,
                name:'',
                parentId:'',
                dirPath:''
            },
            isSel : false, //是否选中某个元素
            selItem:{},
            selAgin : false, //用于判断是否二次选中
            selDelete : false,//用于判断是否选中删除按钮
        },
        methods: {
        	/*
        	*元素选中事件
        	**/ 
            dirSel:function (item) {
            	this.selItem = item;
                this.isSel = true;
                this.selAgin = true;//重复触发
                console.log('选中事件'+item);
            },
            /*
            *元素离开焦点事件
            */
            dirBlur:function(item){ 
            	//延迟100执行 以免被阻断 
	                this.selAgin = false; 
	            	this.selDelete = false;
	            	//延迟执行 避免后续判断操作被阻断
	            	setTimeout(function () {
		            	if(imageDirList.selDelete || !imageDirList.selAgin ){ //选的是删除
		            	    imageDirList.isSel=false;  
						 	 
						 }else { //选的是其他的
						 	imageDirList.isSel=true; 
						 }  
						 console.log('离开焦点事件'+item);
					 },200);   
            	 
            },
            /**
            * 文件夹双击事件
            */
            dblClickDir:function (id,index) {
                //1加入队列
                this.dirLayers.push(this.items[index]);
                //设置当前的文件夹
                this.nowDirItem = this.items[index];
                //2发请求重载对应文件夹的列表
                this.loadDirsAndImgs(id);
            },
            /*
            *选择文件夹层结构后的事件
            */
            dirLayerSel:function (id,index) {
               //设置当前的文件夹
                this.nowDirItem = this.dirLayers[index];
                //1删除队列以后
                this.dirLayers = this.dirLayers.slice(0,index+1); 
                //2发请求重载对应文件夹的列表
                this.loadDirsAndImgs(id);
            },
            /*根据文件夹id获取对应的图片和文件夹*/
            loadDirsAndImgs:function(id){
                this.$http.post(this.loadDirs+id).then(function(data){
                    console.log(this.loadDirs+': '+data.data.success);
                    if(data.data.success){
                        //将自己的
                        this.items = data.data.data;
                    }else{
                        alert("查询列表失败："+data.data.responseMessage);
                    }
                }).catch(function(){
                    alert('服务器异常！');
                });
            },
            /*
            * 提交在服务端建立文件夹的请求
            */
            addDir:function () {
                if(this.mkDir.name.trim().length==0){
                    alert('文件夹名称不能为空');
                    return ;
                }
                //保存接口
                this.mkDir.parentId = this.nowDirItem.id;
                this.$http.post(this.saveDir, this.mkDir).then(function(data){
                    console.log(this.saveDir+': '+data.data.success);
                    if(data.data.success){
                        //将自己的
                        //alert('添加成功');
                        //隐藏模态框
                        $('#addDirModal').modal('hide');
                        //重置name
                        this.mkDir.name = '';
                        //重载
                        this.loadDirsAndImgs(this.nowDirItem.id);
                    }else{
                        alert("保存失败："+data.data.responseMessage);
                    }
                }).catch(function(){
                    alert('服务器异常！');
                });
            },
            addImg:function(){
            	if(this.$refs.fileSel.value.length == 0 ) {
                    alert('请选择上传图片');
                    return false;
                }
                //走提交流程
                    var formData = new FormData(this.$refs.submitForm);     //   是需要提交的表单
                    this.$http.post(this.saveImage,formData).then(function(data){ 
                        console.log(data.data.success);
                        if(data.data.success){
                            //alert("上传成功");
                             //隐藏模态框
	                        $('#addImgModal').modal('hide');
	                        //重置文件选择
	                        this.$refs.fileSel.value = '';
	                        //重载
	                        this.loadDirsAndImgs(this.nowDirItem.id);
                        }else{
                            alert("上传失败："+data.data.responseMessage);
                        }

                    }).catch(function(){
                        alert('服务器异常！');
                    });
            },
            //尝试删除选中的元素
            deleteSel: function(){
            	this.selDelete = true; //删除按钮选中
            	 //选中状态
                 if(this.isSel){
                    var delUrl = '' ;
                 	if(this.selItem.type == 'dir'){ //删除文件夹
                 		delUrl = this.deleteDir+this.selItem.id;
                 	}else if(this.selItem.type == 'img'){ //删除图片
                 		delUrl = this.deleteImg+this.selItem.id;
                 	}  
                 	//发送删除请求
                 	 this.$http.post(delUrl).then(function(data){ 
                        console.log(delUrl+' '+data.data.success);
                        if(data.data.success){
                            alert('删除成功'); 
	                        //重载
	                        this.loadDirsAndImgs(this.nowDirItem.id);
                        }else{
                            alert("删除失败："+data.data.responseMessage);
                        }

                    }).catch(function(){
                        alert('服务器异常！');
                    });
                 } 
            },
            
        },
        created: function () {
            //加载顶层文件夹
            this.loadDirsAndImgs(1);
        },
    });
</script>
<!--</body>-->
<!--</html>-->